<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/student_auth'
import { ElMessageBox } from 'element-plus'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const activeIndex = computed(() => route.path)

const logout = () => {
  ElMessageBox.confirm('您确定要退出登录吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    auth.logout()
    router.push('/login')
  }).catch(() => {})
}
</script>
<template>
  <div class="common-layout">
    <el-container>
        <el-aside class = "aside">
          <div class="sidebar">
            <div class="logo">
              <h1>华侨大学</h1>
              <p>智能教学服务系统</p>
            </div>
          </div>
          <el-menu
            class="menu-option"
            active-text-color="#ffd04b"
            background-color=#2c2c54
            :default-active='activeIndex'
            text-color="#fff"
            router
          >
              <el-menu-item index="/student/Homepage/PersonalHomepage" class="el-menu-item">
                  <!--           <el-icon></el-icon>-->
                  <span>个人主页</span>
              </el-menu-item>
              <el-menu-item index="/student/Homepage/SelectedCourse" class="el-menu-item">
                  <span>已选课程</span>
              </el-menu-item>
              <el-menu-item index="/student/Homepage/StudyPlan" class="el-menu-item">
                  <span>学习计划</span>
              </el-menu-item>
              <!-- 学情分析菜单项已注释
              <el-menu-item index="/student/Homepage/StudyAnalyse" class="el-menu-item">
                  <span>学情分析</span>
              </el-menu-item>
              -->
              <el-menu-item index="/student/Homepage/PersonalData" class="el-menu-item">
                  <span>个人资料</span>
              </el-menu-item>
              <el-menu-item index="/student/class" class="el-menu-item">
                  <span>我的班级</span>
              </el-menu-item>
          </el-menu>

          <div class="logout-container">
            <el-button
              type="danger"
              @click="logout"
              class="logout-btn"
            >
              退出登录
            </el-button>
          </div>
        </el-aside>

        <el-main class = "main" index="/student/Homepage/SelectedCourse">
          <router-view></router-view>
        </el-main>
    </el-container>
  </div>
</template>
<style scoped>
.common-layout{
  height: 100vh;
}

.logo {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.logo h1 {
  font-size: 28px;
  color: white;
  margin-top: 10px;
}

.logo p {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 8px;
}

.aside {
  padding: 5px;
  background-color: #2c2c54;
  width: 20vw;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
}

.menu-option{
  border: none;
  flex: 1;
}

.el-menu-item{
  font-size: 18px;
}

.el-menu-item:hover{
  background: rgba(255,255,255,0.1);
}

.el-menu-item:active{
  background-color: rgba(255,255,255,0.1);
}

.main{
  padding: 0;
}

.logout-container {
  padding: 20px 0;
  margin-top: auto;
  text-align: center;
}

.logout-btn {
  width: 80%;
}
</style>
